<template>
	<view class="content">
		<view class="info-block">
			<view class="info-item" v-for="item in list" :key="item.id"
				@click="navigate('/pages/report/form?title='+item.title+'&id='+item.id+'&type='+item.type)">
				<view class="title">{{item.title}}</view>
				<view class="describe-list">
					<view class="describe-item" v-for="item1 in item.describr" :key="item1.id">
						<view class="describe">{{item1.title}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						id: 1,
						title: '暖气报修',
						type: '停暖,供暖,故障',
						describr: [{
								id: 1,
								title: '停暖'
							},
							{
								id: 2,
								title: '供暖'
							},
							{
								id: 3,
								title: '故障'
							},
						]
					},
					{
						id: 2,
						title: '水电报修',
						type: '改水,改电,故障',
						describr: [{
								id: 1,
								title: '改水'
							},
							{
								id: 2,
								title: '改电'
							},
							{
								id: 3,
								title: '故障'
							},
						]
					},
					{
						id: 3,
						title: '公共区域报修',
						type: '楼道灯,单元门,故电梯障',
						describr: [{
								id: 1,
								title: '楼道灯'
							},
							{
								id: 2,
								title: '单元门'
							},
							{
								id: 3,
								title: '电梯'
							},
						]
					},
					{
						id: 4,
						title: '其他业务报修',
						type: '小区环境,路灯,喷泉,垃圾桶',
						describr: [{
								id: 1,
								title: '小区环境'
							},
							{
								id: 2,
								title: '路灯'
							},
							{
								id: 3,
								title: '喷泉'
							},
							{
								id: 4,
								title: '垃圾桶'
							}
						]
					}
				]
			}
		},
		methods: {
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;

		.info-block {
			padding: 30rpx;
			display: flex;
			flex-direction: column;

			.info-item {
				//width: 100%;
				height: 280rpx;
				background-image: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/community/report.png');
				background-size: 100% 100%;
				margin-bottom: 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding-left: 40rpx;
				padding-top: 30rpx;

				.title {
					color: #fff;
					font-size: 36rpx;
				}

				.describe-list {
					display: flex;
					flex-direction: row;

					.describe-item {
						color: #fff;
						margin-top: 30rpx;
						margin-right: 20rpx;
						border-radius: 30rpx;
						padding: 8rpx 24rpx;
						background-color: rgba(248, 248, 248, 0.2);
						font-size: 26rpx;
					}
				}

			}

			.info-item:nth-child(2) {
				background-image: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/community/report1.png');
			}

			.info-item:nth-child(4) {
				background-image: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/community/report1.png');
			}
		}
	}
</style>